<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="icon" type="image/x-icon" href="./images/logo.webp">
    <style>
        .logo-container {
            text-align: center;
            margin-bottom: 15px;
        }

        .music-logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
            transform: rotate(-5deg);
            transition: transform 0.3s ease;
        }

        .music-logo:hover {
            transform: rotate(0deg) scale(1.05);
        }

        .music-logo::before {
            content: '♪';
            font-size: 40px;
            color: white;
            font-weight: bold;
        }

        .app-title {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 20px;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 1px;
            transition: transform 0.3s ease;
        }

        .app-title::before {
            content: '♪';
            font-size: 18px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .app-title:hover {
            transform: translateX(5px);
        }

        .auth-container {
            position: relative;
        }

        /* 注册页面特有样式 */
        .password-strength {
            margin-top: 8px;
            height: 4px;
            background: #e1e5e9;
            border-radius: 2px;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .password-strength.show {
            opacity: 1;
        }

        .strength-bar {
            height: 100%;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .strength-weak {
            background: #e74c3c;
            width: 25%;
        }

        .strength-medium {
            background: #f39c12;
            width: 50%;
        }

        .strength-strong {
            background: #27ae60;
            width: 75%;
        }

        .strength-very-strong {
            background: #2ecc71;
            width: 100%;
        }

        .terms-agreement {
            margin: 20px 0;
            display: flex;
            align-items: flex-start;
            font-size: 14px;
            color: #6c757d;
            line-height: 1.5;
        }

        .terms-agreement input[type="checkbox"] {
            margin-right: 10px;
            margin-top: 2px;
            transform: scale(1.2);
            accent-color: #667eea;
        }

        .terms-agreement a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
        }

        .terms-agreement a:hover {
            text-decoration: underline;
        }

        .register-benefits {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid rgba(102, 126, 234, 0.2);
        }

        .benefits-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .benefits-list {
            font-size: 12px;
            color: #6c757d;
            line-height: 1.4;
        }

        .benefits-list li {
            margin-bottom: 4px;
            list-style: none;
            position: relative;
            padding-left: 15px;
        }

        .benefits-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #27ae60;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="auth-container">
        <div class="app-title">音乐播放器</div>
        <div class="logo-container">
            <div class="music-logo"></div>
        </div>
        <h1 class="auth-title">创建账号</h1>

        <form id="registerForm">
            <div class="form-group">
                <input type="text" id="username" class="form-input" placeholder="请输入用户名" required>
                <div class="error-message" id="usernameError"></div>
            </div>

            <div class="form-group">
                <input type="password" id="password" class="form-input" placeholder="请输入密码" required>
                <div class="password-strength" id="passwordStrength">
                    <div class="strength-bar" id="strengthBar"></div>
                </div>
                <div class="error-message" id="passwordError"></div>
            </div>

            <div class="form-group">
                <input type="password" id="confirmPassword" class="form-input" placeholder="请确认密码" required>
                <div class="error-message" id="confirmPasswordError"></div>
            </div>

            <button type="submit" class="auth-btn">注册账号</button>
        </form>

        <div class="switch-link">
            已有账号? <a href="./login.html">登录</a>
        </div>
    </div>

    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        // 表单验证功能
        const form = document.getElementById('registerForm');
        const username = document.getElementById('username');
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirmPassword');

        // 实时验证
        username.addEventListener('blur', validateUsername);
        password.addEventListener('input', validatePassword);
        confirmPassword.addEventListener('blur', validateConfirmPassword);

        // 清除错误状态
        username.addEventListener('input', () => clearError('username'));
        password.addEventListener('blur', validatePassword);
        confirmPassword.addEventListener('input', () => clearError('confirmPassword'));

        function validateUsername() {
            const value = username.value.trim();
            if (value === '') {
                showError('username', '请输入用户名');
                return false;
            } else if (value.length < 6) {
                showError('username', '用户名至少需要6个字符');
                return false;
            }
            showSuccess('username');
            return true;
        }

        function validatePassword() {
            const value = password.value;
            if (value === '') {
                showError('password', '请输入密码');
                return false;
            } else if (value.length < 6) {
                showError('password', '密码至少需要6个字符');
                return false;
            }
            showSuccess('password');
            return true;
        }

        function validateConfirmPassword() {
            const value = confirmPassword.value;
            if (value === '') {
                showError('confirmPassword', '请输入确认密码');
                return false;
            } else if (value.length < 6) {
                showError('passconfirmPasswordord', '确认密码至少需要6个字符');
                return false;
            }
            showSuccess('confirmPassword');
            return true;
        }

        function showError(fieldName, message) {
            const field = document.getElementById(fieldName);
            const errorElement = document.getElementById(fieldName + 'Error');

            field.classList.add('error');
            field.classList.remove('success');
            errorElement.textContent = message;
            errorElement.classList.add('show');
        }

        function showSuccess(fieldName) {
            const field = document.getElementById(fieldName);
            const errorElement = document.getElementById(fieldName + 'Error');

            field.classList.add('success');
            field.classList.remove('error');
            errorElement.classList.remove('show');
        }

        function clearError(fieldName) {
            const field = document.getElementById(fieldName);
            const errorElement = document.getElementById(fieldName + 'Error');

            field.classList.remove('error', 'success');
            errorElement.classList.remove('show');
        }

        // 表单提交处理
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const isUsernameValid = validateUsername();
            const isPasswordValid = validatePassword();
            const isConfirmPasswordValid = validateConfirmPassword();

            // 发送注册请求
            const data = {
                "userName": username.value,
                "password": password.value,
                "checkPassword": confirmPassword.value
            };
            $.ajax({
                url: "/user/register",
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.data) {
                        alert('注册成功！欢迎加入我们！');
                        location.href = './login.html';
                    } else {
                        alert('注册失败! ' + result.message);
                    }
                },
                error: function (xhr) {
                    alert('HTTP请求失败, 状态码为: ' + xhr.status);
                }
            });
        });

        // 添加交互动画
        document.querySelectorAll('.form-input').forEach(input => {
            input.addEventListener('focus', function () {
                this.parentElement.style.transform = 'scale(1.02)';
            });

            input.addEventListener('blur', function () {
                this.parentElement.style.transform = 'scale(1)';
            });
        });
    </script>
</body>

</html>